<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>自定义窗口</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    #drag-region {
      height: 40px;
      background: #333;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      -webkit-user-select: none;
      width: 100%;
      width: -webkit-fill-available;
      width: -moz-available;
      width: stretch;
      will-change: transform;
      transform: translateZ(0);
      min-width: 100%;
      max-width: 100vw;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #drag-region:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      z-index: -1;
    }

    .window-title {
      color: white;
      margin-left: 15px;
      font-size: 14px;
      font-weight: 500;
    }

    .window-controls {
      display: flex;
      height: 100%;
    }

    .window-control-button {
      width: 46px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .window-control-button:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .window-control-button.close:hover {
      background-color: #e81123;
    }

    .window-control-icon {
      width: 12px;
      height: 12px;
      fill: white;
    }

    .content {
      margin-top: 40px;
      padding: 20px;
      height: calc(100vh - 60px);
      overflow: auto;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="drag-region">
    <div class="window-title">自定义窗口</div>
    <div class="window-controls">
      <div class="window-control-button minimize" data-action="minimize">
        <svg class="window-control-icon" viewBox="0 0 12 12">
          <rect x="1" y="6" width="10" height="1" fill="white" />
        </svg>
      </div>
      <div class="window-control-button maximize" data-action="maximize">
        <svg class="window-control-icon" viewBox="0 0 12 12">
          <rect x="1" y="1" width="10" height="10" stroke="white" fill="none" stroke-width="1" />
        </svg>
      </div>
      <div class="window-control-button close" data-action="close">
        <svg class="window-control-icon" viewBox="0 0 12 12">
          <line x1="1" y1="1" x2="11" y2="11" stroke="white" stroke-width="1" />
          <line x1="1" y1="11" x2="11" y2="1" stroke="white" stroke-width="1" />
        </svg>
      </div>
    </div>
  </div>

  <div class="content">
    <h1>可调整大小的窗口</h1>
    <p>将鼠标移动到窗口边缘来调整大小。</p>
    <p>拖动顶部区域可以移动窗口。</p>
    <p>使用右上角的按钮可以控制窗口：</p>
    <ul>
      <li>最小化窗口</li>
      <li>最大化/还原窗口</li>
      <li>关闭窗口</li>
    </ul>
  </div>

  <script>
    console.log('页面加载完成');
    console.log('拖拽区域:', document.querySelector('#drag-region'));
  </script>
</body>

</html>